<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-24 15:56:19
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-06-27 15:02:35
 * @FilePath: \ant-design-vue-jeecg-master\src\views\networkStatus\modules\carStatus.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="netWorkStatus">
    <!-- <div class="interStatus">
      <h3>在网状态: {{ onlineStatus == '01' ? '不在' : '在网' }}</h3>
      <a-button type="primary" icon="search" @click="statusQuery"> 状态查询 </a-button>
    </div> -->
    <a-table :columns="columns" :data-source="data" bordered>
      <span slot="status" slot-scope="text" :class="text == 0 ? 'error' : ''">{{ text == 0 ? '故障' : '正常' }}</span>
      <span slot="tags" slot-scope="tags">
        <span v-for="(i, index) in tags" :key="index" :class="i.status == 0 ? 'error' : 'normal'"
          >{{ i.label }} &nbsp;&nbsp;&nbsp;</span
        >
      </span>

      <span slot="action" slot-scope="text, record">
        <a>Invite 一 {{ record.name }}</a>
        <a-divider type="vertical" />
        <a>Delete</a>
        <a-divider type="vertical" />
        <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
      </span>
    </a-table>
    <div class="XYTJ">
      <h3>现有故障统计</h3>
      <h4>指控车故障数: 0</h4>
      <h4>导弹故障数: 4</h4>
    </div>
    <div class="statisticalChart">
      <!-- <div class="TJ"> -->
      <!-- </div> -->

      <div id="main"></div>
      <!-- <div id="main1"></div> -->
      <div id="main2"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getAction, httpAction } from '@/api/manage.js'
const columns = [
  {
    title: '名称',
    dataIndex: 'equaName',
    key: 'equaName',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
    // customRender: function (text) {
    //   if (text == '0001') {
    //     return '正常'
    //   } else {
    //     return '故障'
    //   }
    // },
  },
  {
    title: '导弹状态',
    key: 'tags',
    dataIndex: 'tags',
    scopedSlots: { customRender: 'tags' },
  },
]

const data = [
  // {
  //   key: '1',
  //   equaName: '卫星1',
  //   status: 1,
  //   errTime: '2023-01-05 10:33:45',
  //   errReason: '导弹3次查询失败',
  //   tags: [
  //     { label: '载荷1', status: 1 },
  //     { label: '载荷2', status: 1 },
  //     { label: '载荷3', status: 1 },
  //     { label: '载荷4', status: 1 },
  //   ],
  // },
  {
    key: '2',
    equaName: '指控车1',
    status: 0,
    errTime: '2023-01-06 10:33:45',
    errReason: '导弹3次查询失败',
    tags: [
      { label: '导弹1', status: 1 },
      { label: '导弹2', status: 0 },
      { label: '导弹3', status: 1 },
      { label: '导弹4', status: 1 },
    ],
  },
  {
    key: '3',
    equaName: '指控车2',
    status: 1,
    errTime: '2023-01-04 10:33:45',
    errReason: '导弹3次查询失败',
    tags: [
      { label: '导弹5', status: 1 },
      { label: '导弹6', status: 1 },
      { label: '导弹7', status: 1 },
      { label: '导弹8', status: 1 },
    ],
  },
  {
    key: '4',
    equaName: '指控车3',
    status: 1,
    errTime: '2023-01-04 10:33:45',
    errReason: '导弹3次查询失败',
    tags: [
      { label: '导弹9', status: 1 },
      { label: '导弹10', status: 0 },
      { label: '导弹11', status: 1 },
      { label: '导弹12', status: 1 },
    ],
  },
  {
    key: '5',
    equaName: '指控车4',
    status: 1,
    errTime: '2023-01-04 10:33:45',
    errReason: '导弹3次查询失败',
    tags: [
      { label: '导弹13', status: 1 },
      { label: '导弹14', status: 1 },
      { label: '导弹15', status: 1 },
      { label: '导弹16', status: 1 },
    ],
  },
]
export default {
  data() {
    return {
      data,
      columns,
      url: { getNmcPackageGridValueByCode: '/grid/nmcPackageGridValue/code' },
    }
  },
  mounted() {
    this.statusQuery()
    this.initChart()
    // this.initPunch()
    this.initA()
    this.data.forEach((i, index) => {
      if (i.status == 0) {
        this.$notification['error']({
          message: `${i.equaName}状态查询故障`,
          description: (
            <div>
              <p>
                故障时间:<span>{i.errTime}</span>
              </p>
              <p>
                故障描述<span>{i.errReason}</span>
              </p>
              <p>
                故障等级<span>1级</span>
              </p>
            </div>
          ),
        })
      }
      if (i.tags) {
        i.tags.forEach((item) => {
          if (item.status == 0) {
            this.$notification['error']({
              message: `${i.equaName},${item.label}状态查询故障`,
              description: (
                <div>
                  <p>
                    故障时间:<span>{i.errTime}</span>
                  </p>
                  <p>
                    故障描述<span>{i.errReason}</span>
                  </p>
                  <p>
                    故障等级<span>1级</span>
                  </p>
                </div>
              ),
            })
          }
        })
      }
    })
  },
  // keep-alive 组件激活时调用
  activated() {
    this.statusQuery()
  },
  methods: {
    statusQuery() {
      // '18-指挥车设备状态'
      this.getValueByCode()
    },
    getValueByCode() {
      getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('14-卫星设备状态')}`).then((res) => {
        let temp = res.result

        this.data[0].status = temp.packageGridValue
      })
      // getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('18-星指下行链路使用速率档位')}`).then((res) => {
      //   let temp = res.result
      //   this.form.downRate = temp.packageGridValue
      //   console.log(this.form, '18-星指下行链路使用速率档位')
      // })
      // getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('18-星指下行链路信噪比')}`).then((res) => {
      //   let temp = res.result
      //   this.form.noise = temp.packageGridValue
      //   console.log(this.form, '18-星指下行链路信噪比')
      // })
      // getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('18-星指下行链路频点号')}`).then((res) => {
      //   let temp = res.result
      //   // this.form.downFrequencyPointNo = temp.packageGridValue
      //   this.data[1].frequency = temp.packageGridValue
      //   console.log(this.data[1].frequency, '18-星指下行链路频点号')
      // })
      // getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('18-星指上行链路频点号')}`).then((res) => {
      //   let temp = res.result
      //   // this.form.upFrequencyPointNo = temp.packageGridValue
      //   this.data[0].frequency = temp.packageGridValue
      //   console.log(this.data[0].frequency, '18-星指上行链路频点号')
      // })
      // getAction(`${this.url.getNmcPackageGridValueByCode}/${encodeURI('18-使用具体的时隙号')}`).then((res) => {
      //   let temp = res.result
      //   console.log(temp, 'temp')
      //   // this.form.slotNo = temp.packageGridValue
      //   this.data[0].timeSlot = temp.packageGridValue
      //   console.log(this.data[0].timeSlot, '18-使用具体的时隙号')
      // })
    },
    initChart() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: '故障次数统计图', //正标题
          x: 'center', //标题水平方向位置
          y: '0', //标题竖直方向位置
          textStyle: {
            fontSize: 18,
            fontWeight: 'normal',
            color: '#fff',
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          textStyle: {
            color: '#fff',
          },
          orient: 'vertical',
          left: 'center',
          bottom: 'bottom',
        },

        grid: {
          left: '1%',
          right: '1%',
          bottom: '7%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['2023', '2024', '2025', '2026', '2027'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          // {
          //   name: '卫星',
          //   type: 'bar',
          //   stack: 'Ad',
          //   emphasis: {
          //     focus: 'series',
          //   },
          //   data: [3, 7, 3, 5, 3, 3, 1],
          // },
          {
            name: '指控车',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series',
            },
            data: [1, 4, 5, 3, 2, 4, 2],
          },
          {
            name: '导弹',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series',
            },
            data: [3, 2, 4, 2, 6, 1, 6],
          },
        ],
      }

      option && myChart.setOption(option)
    },
    initA() {
      var my1 = document.getElementById('main2')
      let my = echarts.init(my1)
      // 数据列表
      // 图例名称
      var arr1 = ['指控车', '导弹']
      // 是否查看
      var arr2 = {}
      // 产品列表
      var arr3 = ['2020', '2021', '2022', '2023']
      // 系列项
      var arr4 = []
      // 系列的具体数据
      var arr5 = [
        // "卫星"    ["番茄","黄瓜","土豆","四季豆"]
        // [101, 301, 401, 302],
        // "指控车"    ["番茄","黄瓜","土豆","四季豆"]
        [410, 302, 630, 322],
        // "导弹"	["番茄","黄瓜","土豆","四季豆"]
        [502, 320, 320, 433],
      ]
      // 数据填充
      // 图例的个数与系列个数一致
      for (var i = 0; i < arr1.length; i++) {
        // var a = prompt('您打算查看' + arr1[i] + '吗？(只有true为查看)', true)
        // if (a == 'true') {
        //   arr2[arr1[i]] = true
        // } else {
        //   arr2[arr1[i]] = false
        // }
        arr4[i] = {}
        // 系列名与图例统一
        arr4[i].name = arr1[i]
        // 系列的类型
        arr4[i].type = 'bar'
        // 单个系列的数据
        arr4[i].data = arr5[i]
      }

      my.setOption({
        title: {
          text: '平均故障时长统计', //正标题
          x: 'center', //标题水平方向位置
          y: '0', //标题竖直方向位置
          textStyle: {
            fontSize: 18,
            fontWeight: 'normal',
            color: '#fff',
          },
        },
        legend: {
          data: arr1,
          selected: arr2,
          textStyle: {
            color: '#fff',
          },
          orient: 'vertical',
          left: 'center',
          bottom: 'bottom',
        },
        xAxis: {
          data: arr3,
        },
        yAxis: {
          axisLabel: {
            formatter: '{value}s', // 在轴标签之后添加单位 "kg"
          },
        },
        series: arr4,
      })
    },
    initPunch() {
      var chartDom = document.getElementById('main1')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          data: ['2023', '2024', '2025', '2026', '2027'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: 'Punch Card',
            type: 'scatter',
            symbolSize: function (value) {
              return value * 10
            },
            data: [1.5, 3.8, 2.4, 4.6, 4.5],
            animationDelay: function (idx) {
              return idx * 5
            },
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.interStatus {
  display: flex;
  justify-content: start;
  h3 {
    margin-right: 20px;
  }
}
.XYTJ {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  h3,
  h4 {
    margin-right: 30px;
  }
  // h2{}
}
.netWorkStatus {
  font-size: 20px;
  display: flex;
  flex-direction: column;
  .statisticalChart {
    padding-top: 15px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-around;
    border: 2px solid #3a8ee6;
    #main,
    #main1,
    #main2 {
      width: 500px;
      height: 400px;
    }
  }
}
.error {
  color: red;
}
.normal {
  color: rgb(52, 177, 52);
}
</style>
